<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="6">
        <el-card shadow="always" style="background-color: #33cabb;height: 100px;color: white">
          <div style="float: left;display: block;">
            <el-avatar icon="el-icon-user" style="background-color:  #33cabb;    font-size: 30px;" size="number"></el-avatar>
          </div>
          <div style="float: right;display: block;line-height: 100%">
            <p>用户总数</p>
            <p>111</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" style="background-color: #f96868;height: 100px;color: white">
          <div style="float: left;display: block;">
            <el-avatar icon="el-icon-notebook-2" style="background-color:  #f96868; font-size: 30px;" size="number"></el-avatar>
          </div>
          <div style="float: right;display: block;line-height: 100%">
            <p>自习室总数</p>
            <p>111</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" style="background-color: #926dde;height: 100px;color: white ">
          <div style="float: left;display: block;">
            <el-avatar icon="el-icon-coin" style="background-color: #926dde;  font-size: 30px;" size="number"></el-avatar>
          </div>
          <div style="float: right;display: block;line-height: 100%">
            <p>订单总数</p>
            <p>111</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>近期订单</span>
      </div>
      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            prop="id"
            label="订单号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="userName"
            label="用户名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="roomNo"
            label="自习室编号">
        </el-table-column>
        <el-table-column
            prop="typeName"
            label="自习室类型">
        </el-table-column>
        <el-table-column
            prop="startTime"
            label="开始时间">
        </el-table-column>
        <el-table-column
            prop="endTime"
            label="结束时间">
        </el-table-column>
        <el-table-column
            prop="price"
            label="消费">
        </el-table-column>
        <el-table-column
            prop="dataStatus"
            label="订单状态">
          <template slot-scope="scope">
            {{scope.row.dataStatus ===false?'退款':'有效'}}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import {doGetOrder} from "@/api/order";

export default {
  name: "dash",
  data() {
    return{
      tableData: []
    }
  },mounted() {

    const obj = {
      pageIndex: 1,
      pageSize: 20,
      queryInfo:{
        token:window.localStorage.getItem("token")
      }
    }
    doGetOrder(obj).then(res=>{
      if (res.code===200){
        this.tableData = res.data.records;
      }
    })
  }
}
</script>

<style lang="less" scoped>
.box-card{
  margin-top: 20px;
}
</style>